<!DOCTYPE html>
<html>
<head>
    <title>删除文件</title>
    <!-- 引入 Bootstrap 样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <h1 class="mt-5">文件列表</h1>
    <ul class="list-group mt-3">
        {% for name in data %}
            <li class="list-group-item d-flex justify-content-between align-items-center" id='{{ forloop.counter }}'>
                <a href="http://localhost:8000/static/media/{{ name }}">{{ name }}</a>
                <button class="btn btn-danger btn-sm" onclick="deleteFile('{{ name }}')">删除</button>
            </li>
        {% endfor %}
    </ul>
</div>

<script>


    // JavaScript 函数来处理删除操作
    async function deleteFile(name) {
        console.log(`当前文件为：${name}`);

        if (confirm(`确定要删除文件 ${name} 吗？`)) {
            try {
                const response = await fetch(`http://localhost:8000/chat/delete_file?path=${name}`);
                var data = await response.json();
                if (data['message'] === 'ok') {
                    window.alert("删除成功！");
                    // 刷新页面
                    location.reload();
                } else if (data['message'] === 'error') {
                    window.alert("删除失败！");
                }
            } catch (error) {
                console.log(error);
            }
        }
    }
</script>
</body>
</html>
